<template>
	<view class="container">
		<view class="content_view">
			<view class="title_view Text77" v-if="useFlag===true">
				请将手机靠近门禁设备
			</view>
			<view class="title_view Text77" style="color: #C01212;" v-else>
				<span>此门禁卡不在可开门时间内</span>
				<span>请联系管理员进行开门操作</span>
			</view>
			<view class="center_view">
				<view class="swiper_view">
					<u-image v-if="useFlag===true" :src="dataList[cardIndex].cardColor" mode='fit' width="100%"
						height="340rpx" :show-loading="false"></u-image>
					<u-image v-else src="@/static/images/smartLock/cardColor0.png" mode='fit' width="100%"
						height="340rpx"></u-image>
					<view class="swiper_card_view">
						<view class="Text88" style="color: #FFFFFF;">
							{{ dataList[cardIndex].cardName }}
						</view>
						<view class="Text99" style="color: #FFFFFF;font-weight: 400;font-size: 24rpx;">
							{{ dataList[cardIndex].deviceName }}
						</view>
					</view>
				</view>
				<view class="arrow_left_view" @click="cardLeftAction()">
					<u-image src="@/static/images/smartLock/whiteLeft.png" mode='fit' width="100%"
						height="100%"></u-image>
				</view>
				<view class="arrow_right_view" @click="cardRightAction()">
					<u-image src="@/static/images/smartLock/whiteRight.png" mode='fit' width="100%"
						height="100%"></u-image>
				</view>
			</view>
			<view class="Text00 des_view" @click="detailAction()">
				<u-icon name="arrow-right" label="卡片详情" label-pos="left" color="#8A8A8A" size="24" label-color="#8A8A8A"
					label-size="24"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dataList: [],
				cardIndex: 0,
				useFlag: false
			}
		},
		onLoad() {
			this.dataList = this.$Route.query.dataList
			this.cardIndex = this.$Route.query.cardIndex
			this.checkAuthorizeData()
		},
		onUnload() {
			this.doEmulateCard("0")
		},
		methods: {
			cardLeftAction() {
				if (this.cardIndex > 0) {
					this.cardIndex -= 1
				}
			},
			cardRightAction() {
				if (this.cardIndex < this.dataList.length - 1) {
					this.cardIndex += 1
				}
			},
			detailAction(item) {
				this.$Router.push({
					name: 'cardDetail',
					params: {
						id: this.dataList[this.cardIndex].id
					}
				})
			},
			checkAuthorizeData() {
				var that = this
				this.$apis.checkAuthorize({
					deviceId: this.dataList[this.cardIndex].deviceId
				}).then(result => {
					if (result.res.data.code == '200') {
						that.useFlag = result.res.data.data.useFlag;
						if (that.useFlag) {
							that.doEmulateCard(this.dataList[this.cardIndex].cardNo)
						}
					} else {
						that.doEmulateCard("0")
						that.$show.toastMessage(result.res.data.msg);
					}
				})
			},
			doEmulateCard(uid) {
				var chivoLockModule = uni.requireNativePlugin("ChivoLockModule")
				console.log("ChivoLockModule doEmulateCard == " + chivoLockModule)
				if (chivoLockModule != null) {
					chivoLockModule.doEmulateCard({
						'uid': uid,
					}, (ret) => {
						console.log("doEmulateCard ret === " + ret)
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #DBDBDB;
		display: flex;
		justify-content: center;
		padding-top: 30%;
	}

	.content_view {
		width: 90%;
		height: 100%;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title_view {
			display: flex;
			flex-direction: column;
			margin-top: 50rpx;
			margin-bottom: 60rpx;
		}

		.center_view {
			width: 100%;
			position: relative;

			.arrow_left_view {
				width: 40rpx;
				height: 100rpx;
				position: absolute;
				left: 20rpx;
				top: calc(50% - 50rpx);
			}

			.arrow_right_view {
				width: 40rpx;
				height: 100rpx;
				position: absolute;
				right: 20rpx;
				top: calc(50% - 50rpx);
			}

			.swiper_view {
				width: 100%;
				height: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				position: relative;

				.swiper_card_view {
					position: absolute;
					left: 22%;
					top: 12%;
				}

				.swiper_lock_view {
					line-height: 34rpx;
					padding: 10rpx 26rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					border-radius: 43rpx;
					border: 2rpx solid #FFFFFF;
					position: absolute;
					right: 5%;
					top: calc(50% - 30rpx);
				}
			}
		}

		.des_view {
			margin-top: 10rpx;
			margin-bottom: 25rpx;
		}

	}
</style>